<template >
    <div class="register">
        <div class="card">
            <p>在线教育管理系统</p>
            <el-form :rules="rules" ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名" prop="user" >
                    <el-input placeholder="用户名" v-model="form.user" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input type="text" v-model="form.email" placeholder="邮箱" prefix-icon="el-icon-document-copy">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd" >
                    <el-input type="password" v-model="form.pwd" placeholder="密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repwd">
                    <el-input type="password" v-model="form.repwd" placeholder="确认密码" prefix-icon="el-icon-lock">
                    </el-input>
                </el-form-item>
                <el-form-item label="身份">
                    <el-select placeholder="请选择身份" v-model="form.role">
                        <el-option label="叛徒" value="叛徒"></el-option>
                        <el-option label="贫民" value="贫民"></el-option>
                        <el-option label="平民" value="平民"></el-option>
                        <el-option label="管理员" value="管理员"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="goregister">注册</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
        }
        return {
            form: {
                user: '',
                pwd: '',
                email: '',
                repwd: '',
                role: '',
            },
            rules: {
                user: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                repwd: [
                    { required: true, validator: validatePass2, trigger: 'blur' },
                    
                ],
            }
        }
    },
    methods: {
        async goregister() {
            this.$refs.form.validate(async (valid) => {
                if (!valid) {
                    return this.$message.error('校验失败')
                } else {
                    var res = await this.axios({
                        url: "/api/users/register",
                        method: "POST",
                        data: {
                            name: this.form.user,
                            email: this.form.email,
                            password: this.form.pwd,
                            password2: this.form.repwd,
                            identity: this.form.role
                        }
                    })
                    console.log(res);
                    if (res.status == 200) {
                        this.$message.success('注册成功')
                        this.$router.push('/')
                    }
                }
            })

        }
    }
}
</script>
<style >
* {
    padding: 0;
    margin: 0;
}

.register {
    box-sizing: border-box;
    width: 100vw;
    height: 100%;
    background-color: #2d3a4b;
    position: relative;
    /* padding-top: 100px;
    padding-left: 460px; */
}

.card {
    box-sizing: border-box;
    width: 600px;
    /* height: 300px; */
    /* border: 1px solid #000; */
    line-height: 75px;
    /* text-align: center; */
    padding: 0 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


}

.card p {
    color: #fff;
    font-size: 25px;
    font-weight: 900;
    text-align: center;
}

.card .el-input__inner {
    background-color: #283443;
    ;
    border: none;
    color: #fff
}

.card .el-button {
    width: 100%;
}

.el-form-item__label {
    
    color: #fff;
}
</style>